import React, { useState } from 'react';
import { Card, Calendar as AntCalendar, Badge, Button, Modal, Form, Input, DatePicker, Select, App } from 'antd';
import { CalendarOutlined, PlusOutlined } from '@ant-design/icons';
import type { Dayjs } from 'dayjs';

const Calendar: React.FC = () => {
  const [, setSelectedDate] = useState<Dayjs | null>(null);
  const [showAddModal, setShowAddModal] = useState(false);
  const { message } = App.useApp();
  const [events, setEvents] = useState<any[]>([
    {
      id: 1,
      title: '团队会议',
      date: '2024-01-15',
      type: 'meeting',
      description: '讨论项目进度',
    },
    {
      id: 2,
      title: '项目截止日期',
      date: '2024-01-20',
      type: 'deadline',
      description: '完成功能开发',
    },
  ]);

  const getListData = (value: Dayjs) => {
    const dateStr = value.format('YYYY-MM-DD');
    return events.filter(event => event.date === dateStr);
  };

  const dateCellRender = (value: Dayjs) => {
    const listData = getListData(value);
    return (
      <ul className="events">
        {listData.map((item) => (
          <li key={item.id}>
            <Badge 
              status={item.type === 'meeting' ? 'processing' : 'error'} 
              text={item.title}
            />
          </li>
        ))}
      </ul>
    );
  };

  const handleAddEvent = (values: {
    title: string;
    date: Dayjs;
    type: string;
    description?: string;
  }) => {
    const newEvent = {
      id: Date.now(),
      title: values.title,
      date: values.date.format('YYYY-MM-DD'),
      type: values.type,
      description: values.description,
    };
    setEvents([...events, newEvent]);
    setShowAddModal(false);
    message.success('事件添加成功');
  };

  return (
    <div className="p-8 max-w-6xl mx-auto">
      <div className="mb-6 flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-800 dark:text-white flex items-center gap-2">
            <CalendarOutlined />
            日程管理
          </h1>
          <p className="text-gray-600 dark:text-gray-300 mt-2">管理您的日程安排</p>
        </div>
        <Button 
          type="primary" 
          icon={<PlusOutlined />}
          onClick={() => setShowAddModal(true)}
        >
          添加事件
        </Button>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
        {/* 日历 */}
        <Card className="lg:col-span-3">
          <AntCalendar 
            dateCellRender={dateCellRender}
            onSelect={setSelectedDate}
          />
        </Card>

        {/* 侧边栏 */}
        <div className="space-y-4">
          {/* 今日事件 */}
          <Card title="今日事件" size="small">
            <div className="space-y-2">
              {events.filter(event => event.date === new Date().toISOString().split('T')[0]).length > 0 ? (
                events
                  .filter(event => event.date === new Date().toISOString().split('T')[0])
                  .map(event => (
                    <div key={event.id} className="p-2 bg-gray-50 rounded">
                      <div className="font-medium">{event.title}</div>
                      <div className="text-sm text-gray-500">{event.description}</div>
                    </div>
                  ))
              ) : (
                <div className="text-gray-500 text-sm">今日无事件</div>
              )}
            </div>
          </Card>

          {/* 即将到来 */}
          <Card title="即将到来" size="small">
            <div className="space-y-2">
              {events.slice(0, 3).map(event => (
                <div key={event.id} className="p-2 bg-gray-50 rounded">
                  <div className="font-medium">{event.title}</div>
                  <div className="text-sm text-gray-500">{event.date}</div>
                </div>
              ))}
            </div>
          </Card>

          {/* 统计 */}
          <Card title="统计" size="small">
            <div className="space-y-2 text-sm">
              <div className="flex justify-between">
                <span>本月事件:</span>
                <span className="font-medium">{events.length}</span>
              </div>
              <div className="flex justify-between">
                <span>会议:</span>
                <span className="font-medium">
                  {events.filter(e => e.type === 'meeting').length}
                </span>
              </div>
              <div className="flex justify-between">
                <span>截止日期:</span>
                <span className="font-medium">
                  {events.filter(e => e.type === 'deadline').length}
                </span>
              </div>
            </div>
          </Card>
        </div>
      </div>

      {/* 添加事件模态框 */}
      <Modal
        title="添加事件"
        open={showAddModal}
        onCancel={() => setShowAddModal(false)}
        footer={null}
      >
        <Form onFinish={handleAddEvent} layout="vertical">
          <Form.Item
            name="title"
            label="事件标题"
            rules={[{ required: true, message: '请输入事件标题' }]}
          >
            <Input placeholder="请输入事件标题" />
          </Form.Item>

          <Form.Item
            name="date"
            label="日期"
            rules={[{ required: true, message: '请选择日期' }]}
          >
            <DatePicker className="w-full" />
          </Form.Item>

          <Form.Item
            name="type"
            label="事件类型"
            rules={[{ required: true, message: '请选择事件类型' }]}
          >
            <Select placeholder="请选择事件类型">
              <Select.Option value="meeting">会议</Select.Option>
              <Select.Option value="deadline">截止日期</Select.Option>
              <Select.Option value="reminder">提醒</Select.Option>
              <Select.Option value="other">其他</Select.Option>
            </Select>
          </Form.Item>

          <Form.Item name="description" label="描述">
            <Input.TextArea placeholder="请输入事件描述" rows={3} />
          </Form.Item>

          <Form.Item>
            <div className="flex gap-2 justify-end">
              <Button onClick={() => setShowAddModal(false)}>
                取消
              </Button>
              <Button type="primary" htmlType="submit">
                添加
              </Button>
            </div>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default Calendar;